<template>
    <div class="time-deal-with" v-if="showDatePicker">
        <div class="triangle_border_up"></div>
        <div class="time-container no-select">
            <div class="left-table">
                <table class="left-calendar-table" border="0" cellpadding="0" cellspacing="0">
                    <thead>
                    <tr class="header">
                        <th>
                            <a-icon type="left" @click="prePrev()" v-if="isShowLeftIcon"/>
                        </th>
                        <th colspan="5" class="current-month">{{leftCurrentMonth}}</th>
                        <th>
                            <a-icon type="right" @click="preNext()" v-if="isShowPreRightIcon"/>
                        </th>
                    </tr>
                    <tr>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in preDateArr">
                        <td v-for="data in item" @click="selectDate" @mouseover="onMouseOver" @mouseout="onMouseLeave">
                            <span v-html="data" v-if="isNumber(data) && !isPreToday(data)" class="before-active-period"></span>
                            <span v-else-if="isNumber(data) && isPreToday(data)" class="before-active-period">今天</span>
                            <span v-html="data" v-else></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="time-inner-content">
                    <p><span>开始时间</span>{{getTerminateTime.split(' ')[0]}}</p>
                    <div class="calendar-time">
                        <a-select @change="handLeftHChange" size="small" style="width: 65px" v-model="preHour">
                            <a-select-option v-for="val in hourArr" :value="val" :disabled="leftStartDisabled(val)">
                                {{val}}
                            </a-select-option>
                        </a-select><span class="after-prefix">时</span>
                        <a-select @change="handLeftMChange" size="small" style="width: 65px" v-model="preMin">
                            <a-select-option v-for="val in minArr" :value="val" :disabled="leftEndDisabled(val)">
                                {{val}}
                            </a-select-option>
                        </a-select><span class="after-prefix">分</span>
                    </div>
                </div>
            </div>
            <div class="right-table">
                <table class="right-calendar-table" border="0px" cellpadding="0px" cellspacing="0px">
                    <thead>
                    <tr class="header">
                        <th>
                            <a-icon type="left" @click="nexPre()" v-if="isShowNextLeftIcon"/>
                        </th>
                        <th colspan="5" class="current-month">{{rightCurrentMonth}}</th>
                        <th>
                            <a-icon type="right" @click="nexNext()"/>
                        </th>
                    </tr>
                    <tr>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in nextDateArr">
                        <td v-for="data in item" @click="selectDate" @mouseover="onMouseOver" @mouseout="onMouseLeave">
                            <span v-html="data" v-if="isNumber(data) && !isNextToday(data)" class="after-active-period"></span>
                            <span v-else-if="isNumber(data) && isNextToday(data)" class="after-active-period">今天</span>
                            <span v-html="data" v-else></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="time-inner-content">
                    <p><span>结束时间</span>{{getTerminateTime.split(' ')[3]}}</p>
                    <div class="calendar-time">
                        <a-select size="small" style="width: 65px" v-model="afterHour">
                            <a-select-option v-for="val in hourArr" :value="val" :disabled="rightStartDisabled(val)">
                                {{val}}
                            </a-select-option>
                        </a-select><span class="after-prefix">时</span>
                        <a-select size="small" style="width: 65px" v-model="afterMin">
                            <a-select-option v-for="val in minArr" :value="val" :disabled="rightEndDisabled(val)">
                                {{val}}
                            </a-select-option>
                        </a-select><span class="after-prefix">分</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="calendar-select-footer">
            <div>
                <button class="ant-btn-my cancel" @click="cancel()">取消</button>
                <button class="ant-btn-my sure" :class="{is_active: disabled}" @click="pickerTime()">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: "timeSelect",
        props: {
            time: {
                type: Array,
                default: []
            },
            showDatePicker: {
                type: Boolean,
                default: false
            }
        },
        async created() {
            this.preYear = moment().get('year');
            this.preMonth = moment().get('month') + 1;
            this.preDay = moment().get('date');

            this.nextYear = moment().get('year');
            this.nextMonth = moment().get('month') + 2;
            this.nextDay = moment().get('date');

            for (let i = 0; i < 24; i++) {
                if (i < 10) {
                    i = '0' + i
                }
                this.hourArr.push(i);
            }

            for (let i = 0; i < 60; i++) {
                if (i < 10) {
                    i = '0' + i
                }
                this.minArr.push(i);
            }

            this.preHour = moment().get('hour') < 10 ? '0' + moment().get('hour') : moment().get('hour');
            this.preMin = moment().get('minute') < 10 ? '0' + moment().get('minute') : moment().get('minute');
            this.afterHour = moment().get('hour') < 10 ? '0' + moment().get('hour') : moment().get('hour');
            this.afterMin = moment().get('minute') < 10 ? '0' + moment().get('minute') : moment().get('minute');

            this.preDateArr = await this.getCalendar(this.preYear, this.preMonth);
            this.nextDateArr = await this.getCalendar(this.nextYear, this.nextMonth);

            this.start = moment().format('YYYY-MM-DD');
            this.end = moment().format('YYYY-MM-DD');

            this.setBackground();
        },
        data() {
            return {
                preYear: '',
                preMonth: '',
                preDay: '',
                preDateArr: [],

                nextYear: '',
                nextMonth: '',
                nextDay: '',
                nextDateArr: [],

                count: 1,
                start: '',
                end: '',
                tmpEnd: '',

                disabled: true,

                beforeMonths: [],
                afterMonths: [],

                hourArr: [],
                minArr: [],

                preHour: '',
                preMin: '',
                afterHour: '',
                afterMin: '',

                beforeDaysToday: false
            }
        },
        updated() {
            this.setBackground();
        },
        computed: {
            isShowLeftIcon() {
                if (this.beforeDaysToday) {
                    return this.preYear > moment().get('year') || (this.preYear === moment().get('year')
                        && this.preMonth > (moment().get('month') + 1))
                } else {
                    return true
                }
            },
            leftCurrentMonth() {
                return this.preYear + '年' + this.preMonth + '月';
            },
            rightCurrentMonth() {
                return this.nextYear + '年' + this.nextMonth + '月';
            },
            isShowPreRightIcon() {
                return moment(this.preYear + '-' + this.preMonth, 'YYYY-M').add(2, "months") <=
                    moment(this.nextYear + '-' + this.nextMonth, 'YYYY-M')
            },
            isShowNextLeftIcon() {
                return moment(this.nextYear + '-' + this.nextMonth, 'YYYY-M').subtract(2, "months") >=
                    moment(this.preYear + '-' + this.preMonth, 'YYYY-M')
            },
            getTerminateTime() {
                if (this.end) {
                    return this.start + ' ' + this.preHour + ':' + this.preMin + ' - ' + this.end + ' ' + this.afterHour + ':' + this.afterMin
                } else {
                    return this.start + ' ' + this.preHour + ':' + this.preMin + ' - ' + this.tmpEnd + ' ' + this.afterHour + ':' + this.afterMin
                }
            },
        },
        watch: {
            time: function (time) {
                this.start = moment(time[0]).format('YYYY-MM-DD');
                this.end = moment(time[1]).format('YYYY-MM-DD');
            }
        },
        methods: {
            moment,
            isPreToday(date) {
                return (this.preYear + '-' + this.preMonth + '-' + date) === moment().format('YYYY-M-D')
            },
            isNextToday(date) {
                return (this.nextYear + '-' + this.nextMonth + '-' + date) === moment().format('YYYY-M-D')
            },
            isNumber(num) {
                return typeof num === 'number'
            },
            leftStartDisabled(value) {
                if (this.beforeDaysToday) {
                    if (moment(this.start).get('year') === moment().get('year') &&
                        (moment(this.start).get('month') + 1) === (moment().get('month') + 1) &&
                        moment(this.start).get('date') === moment().get('date')) {
                        return parseInt(value) < moment().get('hour');
                    }
                }
            },
            leftEndDisabled(value) {
                if (this.beforeDaysToday) {
                    if (moment(this.start).get('year') === moment().get('year') &&
                        (moment(this.start).get('month') + 1) === (moment().get('month') + 1) &&
                        moment(this.start).get('date') === moment().get('date') &&
                        parseInt(this.preHour) === moment().get('hour')) {
                        return parseInt(value) < moment().get('minutes');
                    }
                }
            },
            rightStartDisabled(value) {
                if (this.start === this.end) {
                    return parseInt(value) < parseInt(this.preHour);
                }
            },
            rightEndDisabled(value) {
                if (this.start === this.end && this.preHour === this.afterHour) {
                    return parseInt(value) < parseInt(this.preMin);
                }
            },
            isLeap(year) {
                if (year % 4 === 0 && year % 100 > 0) {
                    return true;
                } else if (year % 400 === 0 && year % 3200 > 0) {
                    return true;
                } else {
                    return false;
                }
            },
            getMonthLength(year, month) {
                if (month === 2) {
                    if (this.isLeap(year)) {
                        return 29;
                    } else {
                        return 28;
                    }
                } else {
                    if (month < 8) {
                        if (month % 2 > 0) {
                            return 31;
                        } else {
                            return 30;
                        }
                    } else {
                        if (month % 2 > 0) {
                            return 30;
                        } else {
                            return 31;
                        }
                    }
                }
            },
            getCalendar(year, month) {
                let len = this.getMonthLength(year, month);
                let d = new Date(year, month - 1, 1);
                let monthLastDay = new Date(year, month - 1, 0);
                let nextMonthDay = 0;
                let day = d.getDay();
                let arr = [];
                let tem = 0;
                for (let i = 0; i < 6; i++) {
                    arr[i] = [];
                    for (let j = 0; j < 7; j++) {
                        tem++;
                        if (tem - day > 0 && tem - day <= len) {
                            arr[i][j] = tem - day;
                        } else if (tem - day <= 0) {
                            arr[i][j] = `<span style="color: #6A6868" class="negative"> ${monthLastDay.getDate() + tem - day} </span>`;
                        } else if (tem - day > len) {
                            arr[i][j] = `<span style="color: #6A6868" class="to-next-month"> ${++nextMonthDay} </span>`;
                        }
                    }
                }
                return arr;
            },
            preNext() {
                if (this.preMonth === 12) {
                    this.preYear++;
                    this.preMonth = 1;
                } else {
                    this.preMonth++;
                }
                this.preDateArr = this.getCalendar(this.preYear, this.preMonth);
            },
            prePrev() {
                if (this.preMonth === 1) {
                    this.preYear--;
                    this.preMonth = 12;
                } else {
                    this.preMonth--;
                }
                this.preDateArr = this.getCalendar(this.preYear, this.preMonth);
            },
            nexNext() {
                if (this.nextMonth === 12) {
                    this.nextYear++;
                    this.nextMonth = 1;
                } else {
                    this.nextMonth++;
                }
                this.nextDateArr = this.getCalendar(this.nextYear, this.nextMonth);
            },
            nexPre() {
                if (this.nextMonth === 1) {
                    this.nextYear--;
                    this.nextMonth = 12;
                } else {
                    this.nextMonth--;
                }
                this.nextDateArr = this.getCalendar(this.nextYear, this.nextMonth);
            },
            selectDate(e) {
                let current = e.currentTarget;
                let left = current.parentNode.parentNode.parentNode.classList.contains('left-calendar-table');

                let currDay = '';
                if (current.innerText === '今天') {
                    currDay = moment().get('date')
                } else {
                    currDay = current.innerText
                }

                if (current.children[0].children[0]) {
                    if (current.children[0].children[0].classList.contains('negative')
                        || current.children[0].children[0].classList.contains('to-next-month')) {
                        return false;
                    }
                }

                if (this.beforeDaysToday) {
                    if (left) {
                        if (moment(this.preYear + '-' + this.preMonth + '-' + currDay, 'YYYY-M-DD').valueOf()
                            < moment().startOf('day').valueOf()) {
                            return false;
                        }
                    } else {
                        if (moment(this.nextYear + '-' + this.nextMonth + '-' + currDay, 'YYYY-M-DD').valueOf()
                            < moment().startOf('day').valueOf()) {
                            return false;
                        }
                    }
                }

                if (this.count % 2 === 1) {
                    this.tmpEnd = this.end;
                    this.end = '';
                    this.disabled = false;
                    if (left) {
                        this.start = moment(this.preYear + '-' + this.preMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                    } else {
                        this.start = moment(this.nextYear + '-' + this.nextMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                    }
                    this.setBackground();
                } else {
                    if (left) {
                        if (moment(this.preYear + '-' + this.preMonth + '-' + currDay, 'YYYY-M-DD').valueOf() <
                            moment(this.start).valueOf()) {
                            if (left) {
                                this.start = moment(this.preYear + '-' + this.preMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                            } else {
                                this.start = moment(this.nextYear + '-' + this.nextMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                            }

                            this.count = 0;
                            this.setBackground();
                            return false
                        }
                    } else {
                        if (moment(this.nextYear + '-' + this.nextMonth + '-' + currDay, 'YYYY-M-DD').valueOf() <
                            moment(this.start).valueOf()) {
                            if (left) {
                                this.start = moment(this.preYear + '-' + this.preMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                            } else {
                                this.start = moment(this.nextYear + '-' + this.nextMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                            }
                            this.count = 0;
                            this.setBackground();
                            return false;
                        }
                    }

                    if (left) {
                        this.end = moment(this.preYear + '-' + this.preMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                    } else {
                        this.end = moment(this.nextYear + '-' + this.nextMonth + '-' + currDay, 'YYYY-M-DD').format('YYYY-MM-DD')
                    }
                    this.disabled = true;
                    if (moment(this.start + ' ' + this.preHour + ':' + this.preMin).valueOf() >
                        moment(this.end + ' ' + this.afterHour + ':' + this.afterMin).valueOf()) {
                        this.afterHour = this.preHour;
                        this.afterMin = this.preMin;
                    }

                    if (moment(this.start + ' ' + this.preHour + ':' + this.preMin).valueOf() < moment().valueOf()) {
                        this.afterHour = this.preHour = moment().get('hour') < 10 ? '0' + moment().get('hour') : moment().get('hour');
                        this.afterMin = this.preMin = moment().get('minute') < 10 ? '0' + moment().get('minute') : moment().get('minute');
                    }
                    this.setBackground();
                }
                this.count++;
            },
            setBackground() {
                if (!document.querySelectorAll('.before-active-period')) return false;
                if (!document.querySelectorAll('.after-active-period')) return false;
                if (!document.querySelector('.time-container')) return false;

                this.beforeMonths = Array.from(document.querySelectorAll('.before-active-period'));
                this.afterMonths = Array.from(document.querySelectorAll('.after-active-period'));

                let tdList = Array.from(document.querySelector('.time-container').querySelectorAll('td'));
                tdList.forEach(item => {
                    if (item.classList.contains('date-active')) {
                        item.classList.remove('date-active')
                    }
                    if (item.classList.contains('date-blue')) {
                        item.classList.remove('date-blue')
                    }
                    if (item.classList.contains('in-date-active')) {
                        item.classList.remove('in-date-active')
                    }
                });

                let start = moment(this.start);
                let end = moment(this.end);

                if (this.start) {
                    if (this.preYear === start.get('year') && this.preMonth === (start.get('month') + 1)) {
                        if (this.end) {
                            this.beforeMonths[start.get('date') - 1].parentNode.className = 'date-active';

                            let startSelect = start.date();
                            let stopSelect = end.date() - 1;

                            if (this.preYear === start.get('year') && this.preMonth === (end.get('month') + 1)) {
                                for (let i = startSelect; i < stopSelect; i++) {
                                    this.beforeMonths[i].parentNode.className = 'in-date-active';
                                }
                            } else if (this.preYear === start.get('year') && this.preMonth < (end.get('month') + 1)) {
                                for (let i = startSelect; i < start.daysInMonth(); i++) {
                                    this.beforeMonths[i].parentNode.className = 'in-date-active';
                                }
                            }
                        } else {
                            this.beforeMonths[start.get('date') - 1].parentNode.className = 'date-blue';
                        }
                    }
                    if (this.nextYear === start.get('year') && this.nextMonth === (start.get('month') + 1)) {
                        if (this.end) {
                            this.afterMonths[start.get('date') - 1].parentNode.className = 'date-active';

                            let startSelect = start.date();
                            let stopSelect = end.date() - 1;

                            if (this.nextYear === start.get('year') && this.nextMonth === (end.get('month') + 1)) {
                                for (let i = startSelect; i < stopSelect; i++) {
                                    this.afterMonths[i].parentNode.className = 'in-date-active';
                                }
                            } else if (this.nextYear === start.get('year') && this.nextMonth < (end.get('month') + 1)) {
                                for (let i = startSelect; i < end.daysInMonth(); i++) {
                                    if (this.afterMonths[i]) {
                                        this.afterMonths[i].parentNode.className = 'in-date-active';
                                    }
                                }
                            }
                        } else {
                            this.afterMonths[start.get('date') - 1].parentNode.className = 'date-blue';
                        }
                    }
                }
                if (this.end) {
                    if (start.get('year') === end.get('year')) {
                        if (this.preYear === start.get('year') && this.preMonth === (end.get('month') + 1)) {
                            this.beforeMonths[end.get('date') - 1].parentNode.className = 'date-active';
                            if (this.preMonth > (start.get('month') + 1)) {
                                let stopSelect = end.date() - 1;

                                for (let i = 0; i < stopSelect; i++) {
                                    this.beforeMonths[i].parentNode.className = 'in-date-active';
                                }
                            }
                        }
                        if (this.nextYear === start.get('year') && this.nextMonth === (end.get('month') + 1)) {
                            this.afterMonths[end.get('date') - 1].parentNode.className = 'date-active';
                            if (this.nextMonth > (start.get('month') + 1)) {
                                let stopSelect = end.date() - 1;

                                for (let i = 0; i < stopSelect; i++) {
                                    this.afterMonths[i].parentNode.className = 'in-date-active';
                                }
                            }
                        }

                        if (this.preYear === start.get('year') && this.preMonth > (start.get('month') + 1)
                            && this.preMonth < (end.get('month') + 1)) {
                            this.beforeMonths.forEach(item => {
                                item.parentNode.className = 'in-date-active';
                            });
                        }

                        if (this.nextYear === start.get('year') && this.nextMonth > (start.get('month') + 1)
                            && this.nextMonth < (end.get('month') + 1)) {
                            this.afterMonths.forEach(item => {
                                item.parentNode.className = 'in-date-active';
                            });
                        }
                    } else {
                        if (this.nextYear > this.preYear && this.nextYear === end.get('year')) {
                            if (this.preYear >= start.get('year')) {
                                if (this.nextMonth === (end.get('month') + 1)) {
                                    this.afterMonths[end.get('date') - 1].parentNode.className = 'date-active';
                                    let stopSelect = end.date() - 1;

                                    for (let i = 0; i < stopSelect; i++) {
                                        this.afterMonths[i].parentNode.className = 'in-date-active';
                                    }

                                    if (this.preMonth === (start.get('month') + 1)) {
                                        let startSelect = start.date();
                                        for (let i = startSelect; i < start.daysInMonth(); i++) {
                                            this.beforeMonths[i].parentNode.className = 'in-date-active';
                                        }
                                    }
                                    if (this.preMonth > (start.get('month') + 1)) {
                                        this.beforeMonths.forEach(item => {
                                            item.parentNode.className = 'in-date-active';
                                        });
                                    }
                                } else if (this.nextMonth < (end.get('month') + 1)) {
                                    this.afterMonths.forEach(item => {
                                        item.parentNode.className = 'in-date-active';
                                    });
                                    if (this.preMonth === (start.get('month') + 1)) {
                                        let startSelect = start.date();
                                        for (let i = startSelect; i < start.daysInMonth(); i++) {
                                            this.beforeMonths[i].parentNode.className = 'in-date-active';
                                        }
                                    }
                                    if (this.preMonth > (start.get('month') + 1)) {
                                        this.beforeMonths.forEach(item => {
                                            item.parentNode.className = 'in-date-active';
                                        });
                                    }
                                } else if (this.nextMonth > (end.get('month') + 1)) {
                                    if (this.preMonth === (start.get('month') + 1)) {
                                        let startSelect = start.date();
                                        for (let i = startSelect; i < start.daysInMonth(); i++) {
                                            this.beforeMonths[i].parentNode.className = 'in-date-active';
                                        }
                                    }
                                    if (this.preMonth > (start.get('month') + 1)) {
                                        this.beforeMonths.forEach(item => {
                                            item.parentNode.className = 'in-date-active';
                                        });
                                    }
                                }
                            } else {
                                if (this.nextMonth === (end.get('month') + 1)) {
                                    this.afterMonths[end.get('date') - 1].parentNode.className = 'date-active';
                                    let stopSelect = end.date() - 1;

                                    for (let i = 0; i < stopSelect; i++) {
                                        this.afterMonths[i].parentNode.className = 'in-date-active';
                                    }
                                } else if (this.nextMonth < (end.get('month') + 1)) {
                                    this.afterMonths.forEach(item => {
                                        item.parentNode.className = 'in-date-active';
                                    });
                                }
                            }
                        } else if (this.nextYear === this.preYear && this.preYear === start.get('year')) {
                            if (this.preMonth === (start.get('month') + 1)) {
                                let startSelect = start.date();
                                for (let i = startSelect; i < start.daysInMonth(); i++) {
                                    this.beforeMonths[i].parentNode.className = 'in-date-active';
                                }
                            }
                            if (this.preMonth > (start.get('month') + 1)) {
                                this.beforeMonths.forEach(item => {
                                    item.parentNode.className = 'in-date-active';
                                });
                            }
                            if (this.nextMonth === (start.get('month') + 1)) {
                                let startSelect = start.date();
                                for (let i = startSelect; i < start.daysInMonth(); i++) {
                                    this.afterMonths[i].parentNode.className = 'in-date-active';
                                }
                            }
                            if (this.nextMonth > (start.get('month') + 1)) {
                                this.afterMonths.forEach(item => {
                                    item.parentNode.className = 'in-date-active';
                                });
                            }
                        } else if (this.nextYear === this.preYear && this.nextYear === end.get('year')) {
                            if (this.preMonth === (end.get('month') + 1)) {
                                this.beforeMonths[end.get('date') - 1].parentNode.className = 'date-active';
                                let endSelect = end.date() - 1;
                                for (let i = 0; i < endSelect; i++) {
                                    this.beforeMonths[i].parentNode.className = 'in-date-active';
                                }
                            }
                            if (this.preMonth < (end.get('month') + 1)) {
                                this.beforeMonths.forEach(item => {
                                    item.parentNode.className = 'in-date-active';
                                });
                            }
                            if (this.nextMonth === (end.get('month') + 1)) {
                                this.afterMonths[end.get('date') - 1].parentNode.className = 'date-active';
                                let endSelect = end.date() - 1;
                                for (let i = 0; i < endSelect; i++) {
                                    this.afterMonths[i].parentNode.className = 'in-date-active';
                                }
                            }
                            if (this.nextMonth < (end.get('month') + 1)) {
                                this.afterMonths.forEach(item => {
                                    item.parentNode.className = 'in-date-active';
                                });
                            }
                        } else if (this.nextYear > this.preYear && this.preYear === start.get('year')) {
                            if (this.nextYear > end.get('year')) {
                                if (this.preMonth === (start.get('month') + 1)) {
                                    let startSelect = start.date();
                                    for (let i = startSelect; i < start.daysInMonth(); i++) {
                                        this.beforeMonths[i].parentNode.className = 'in-date-active';
                                    }
                                }
                                if (this.preMonth > (start.get('month') + 1)) {
                                    this.beforeMonths.forEach(item => {
                                        item.parentNode.className = 'in-date-active';
                                    });
                                }
                            }
                        } else if (this.nextYear > this.preYear && this.preYear > start.get('year')) {
                            if (this.preYear === end.get('year')) {
                                if (this.preMonth === (end.get('month') + 1)) {
                                    this.beforeMonths[end.get('date') - 1].parentNode.className = 'date-active';
                                    let endSelect = end.date() - 1;
                                    for (let i = 0; i < endSelect; i++) {
                                        this.beforeMonths[i].parentNode.className = 'in-date-active';
                                    }
                                } else if (this.preMonth < (end.get('month') + 1)) {
                                    this.beforeMonths.forEach(item => {
                                        item.parentNode.className = 'in-date-active';
                                    });
                                }
                            }
                        }
                    }
                }
            },
            onMouseOver(e) {
                let current = e.currentTarget;
                let left = current.parentNode.parentNode.parentNode.classList.contains('left-calendar-table');

                if (this.beforeDaysToday) {
                    if (left) {
                        if (moment(this.preYear + '-' + this.preMonth + '-' + current.innerText, 'YYYY-M-DD').valueOf()
                            < moment().startOf('day').valueOf()) {
                            current.style.cursor = 'not-allowed';
                        }
                    } else {
                        if (moment(this.nextYear + '-' + this.nextMonth + '-' + current.innerText, 'YYYY-M-DD').valueOf()
                            < moment().startOf('day').valueOf()) {
                            current.style.cursor = 'not-allowed';
                        }
                    }
                }

                if (current.children[0].children[0]) {
                    if (current.children[0].children[0].classList.contains('negative')
                        || current.children[0].children[0].classList.contains('to-next-month')) {
                        current.style.cursor = 'not-allowed';
                    }
                }

            },
            onMouseLeave(e) {
                let current = e.currentTarget;
                let left = current.parentNode.parentNode.parentNode.classList.contains('left-calendar-table');

                if (this.beforeDaysToday) {
                    if (left) {
                        if (moment(this.preYear + '-' + this.preMonth + '-' + current.innerText, 'YYYY-M-DD').valueOf()
                            < moment().startOf('day').valueOf()) {
                            current.style.cursor = '';
                        }
                    } else {
                        if (moment(this.nextYear + '-' + this.nextMonth + '-' + current.innerText, 'YYYY-M-DD').valueOf()
                            < moment().startOf('day').valueOf()) {
                            current.style.cursor = '';
                        }
                    }
                }

                if (current.children[0].children[0]) {
                    if (current.children[0].children[0].classList.contains('negative')
                        || current.children[0].children[0].classList.contains('to-next-month')) {
                        current.style.cursor = '';
                    }
                }
            },
            handLeftHChange(val) {
                if (moment(this.start + ' ' + val + ':' + this.preMin).valueOf() >
                    moment(this.end + ' ' + this.afterHour + ':' + this.afterMin).valueOf()) {
                    this.afterHour = val;
                    this.afterMin = this.preMin;
                }
                if (this.beforeDaysToday) {
                    if (moment(this.start + ' ' + val + ':' + this.preMin).valueOf() < moment().valueOf()) {
                        this.preHour = moment().get('hour') < 10 ? '0' + moment().get('hour') : moment().get('hour');
                        this.preMin = moment().get('minute') < 10 ? '0' + moment().get('minute') : moment().get('minute');
                    }
                }
            },
            handLeftMChange(val) {
                if (moment(this.start + ' ' + this.preHour + ':' + val).valueOf() >
                    moment(this.end + ' ' + this.afterHour + ':' + this.afterMin).valueOf()) {
                    this.afterHour = this.preHour;
                    this.afterMin = val;
                }
                if (this.beforeDaysToday) {
                    if (moment(this.start + ' ' + this.preHour + ':' + val).valueOf() < moment().valueOf()) {
                        this.preHour = moment().get('hour') < 10 ? '0' + moment().get('hour') : moment().get('hour');
                        this.preMin = moment().get('minute') < 10 ? '0' + moment().get('minute') : moment().get('minute');
                    }
                }
            },
            pickerTime() {
                if (this.disabled === true) {
                    this.$emit('pickerTimePeriod', [this.start + ' ' + this.preHour + ':' + this.preMin, this.end + ' ' + this.afterHour + ':' + this.afterMin]);
                    this.$emit('cancel', false);
                    return true
                }
                return false;
            },
            cancel() {
                this.$emit('cancel', false);
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../assets/scss/mixin";

    .no-select {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .after-prefix {
        margin-left: 5px;
        margin-right: 5px;
    }

    .time-deal-with {
        position: absolute;
        .triangle_border_up{
            top: -8px;
            left: 8px;
            border-width:0 8px 8px;
            border-style:solid;
            border-color:transparent transparent #394047;
            position:absolute;
        }
        z-index: 5;
        background-color: #394047;

        .time-container {
            padding: 10px 10px 0 10px;
            @include centering;

            .left-table {
                .left-calendar-table {
                    tbody {
                        td {
                            transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

                            &.date-active {
                                background-color: $blue;
                            }

                            &.date-blue {
                                background-color: #59A0F2;
                            }

                            &.in-date-active {
                                background-color: #222830;
                            }
                        }
                    }
                }

                margin-right: 5px;

                .anticon {
                    font-size: 14px;
                    cursor: pointer;
                }

                .current-month {
                    font-weight: 600;
                    font-size: 12px;
                }

                .left-calendar-table {
                    width: 100%;
                    border: 1px solid #292c35;

                    thead {
                        th {
                            @include wh(32px, 24px);
                            text-align: center;
                            font-size: 12px;
                        }
                    }

                    tbody {
                        td {
                            text-align: center;
                            @include wh(32px, 24px);
                            min-width: 32px;
                            line-height: 24px;
                            font-size: 12px;
                            padding: 2px 4px;
                            cursor: pointer;
                        }
                    }

                }
            }

            .right-table {
                .right-calendar-table {
                    tbody {
                        td {
                            transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

                            &.date-active {
                                background-color: $blue;
                            }

                            &.date-blue {
                                background-color: #59A0F2;
                            }

                            &.in-date-active {
                                background-color: #222830;
                            }
                        }
                    }
                }

                margin-left: 5px;

                .anticon {
                    font-size: 14px;
                    cursor: pointer;
                }

                .current-month {
                    font-weight: 600;
                    font-size: 12px;
                }

                .right-calendar-table {
                    width: 100%;
                    border: 1px solid #292c35;

                    thead {
                        th {
                            @include wh(32px, 24px);
                            text-align: center;
                            font-size: 12px;
                        }
                    }

                    tbody {
                        td {
                            text-align: center;
                            @include wh(32px, 24px);
                            min-width: 32px;
                            font-size: 12px;
                            padding: 2px 4px;
                            line-height: 24px;
                            cursor: pointer;
                        }
                    }

                }
            }
            .time-inner-content {
                @include fj(flex-start);
                flex-direction: column;
                p{
                    padding: 0;
                    height: 30px;
                    span {
                        color: #7B8592;
                        &::after{
                           content: '： ';
                        }
                    }
                }
                .calendar-time {
                    width: 100%;
                    @include fj(flex-start);
                    align-items: baseline;

                    .ant-select + .ant-select {
                        margin-left: 10px;
                    }
                }
            }
        }

        .calendar-select-footer {
            padding: 0 10px;

            & > div {
                padding: 10px 0;
                @include fj(flex-end);
                align-items: center;
                border-top: 1px solid #292c35;

                p {
                    margin-right: 10px;
                    font-size: 12px;
                }

                .ant-btn-my + .ant-btn-my {
                    margin-left: 10px;
                }

                .ant-btn-my {
                    border: none;
                    @include wh(42px, 28px);
                    text-align: center;
                    line-height: 0;
                    border-radius: 5px;
                    cursor: pointer;

                    &:hover {
                        color: inherit;
                    }

                    &:active {
                        box-shadow: 0 0 3px $blue;
                    }
                }

                .ant-btn-my.cancel {
                    background-color: $blue;
                }

                .ant-btn-my.sure {
                    background-color: $blue;
                    filter: grayscale(0.5);
                    cursor: not-allowed;
                    &.is_active {
                        background-color: $blue;
                        filter: initial;
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>
